Cloudflare を使って polyfill を自動で安全なものへ置き換えましょう

先日ブラウザ互換の JS ライブラリである「Polyfill」にマルウェアが混入されて大きな問題となっていますが、Cloudflare であれば対応がワンクリックで実施できます。

#Cloudflare

#セキュリティ

Guri / Hajime Oguri

2024.06.27

ウィスキー、シガー、パイプをこよなく愛する大栗です。

先日ブラウザ互換の JS ライブラリである、「Polyfill.io」にマルウェアが混入されて大きな問題となっています。Cloudflare では、簡単に対策を行えるための機能がリリースされたのでご紹介します。Polyfill の対応がワンクリックで行えます。

JavaScriptライブラリ「Polyfill.io」にマルウェアが混入され10万以上のサイトに影響

Polyfill について

Polyfill はブラウザ間のバージョンの違いなどを無効にするためのライブラリですが、今年の2月に売却されていることが発覚していました。

Cloudflare では、Polyfill の売却発覚後すぐにフォークしたライブラリを配信して、開発者へ提供していました。しかし、6月25日に懸念が現実化してPolyfill.io にマルウェアが混入されてしまいました。そのため、 Cloudflare では、安全なフォークライブラリの提供だけでなく、polyfill のリンクを Cloudflare のミラーに自動的に置き換える機能の提供を始めました。なお Cloudflare の全プランで利用が可能になっており、Free Plan では自動で有効化されています。有料プランの場合には個別に有効化を行ってください。

やってみる

実際に Cloudflare を利用して配信しているサイトで、以下の HTML ファイルを配信します。前提として、Cloudflare を利用してサイトを配信しており、プロキシステータスがプロキシ済み（CDN を利用している）とします。

確認のために polyfill の以前の URL を記載していますが、危険ですので絶対に真似をしないようお願い致します。polyfill を使用する場合には https://cdnjs.cloudflare.com/polyfill の内容を参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Polyfill Check</title>
</head>
<body>
  <script type="text/javascript" src="https://cdn.polyfill.io/v3/polyfill.js"></script>
  <p>Hello World</p>
</body>
</html>

まずは機能はオフの状態です。ブラウザで表示すると以下のようになります。polyfill の URL はそのままです。

配信される HTML は以下になります。polyfill の URL はそのままです。Hello Worldのあとにスクリプトが追加されていますが、Cloudflare の RUM 機能である Observatory が自動で追加した内容なので問題ありません。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Polyfill Check</title>
</head>
<body>
<script type="text/javascript" src="https://cdn.polyfill.io/v3/polyfill.js"></script>
<p>Hello World</p>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document; 中略</script><script defer src="https://static.cloudflareinsights.com/beacon.min.js/" 中略></script>
</body>
</html>

機能を有効化します。Cloudflare のコンソールで対象のサイトページの [セキュリティ]ー[設定] を開きます。一番下の欄にReplace insecure JavaScript librariesという機能が増えていますので、それを有効にするだけです。安全でないJavaScriptライブラリを置き換える機能ですが、現時点では Polyfill のみ対応しています。

試しているファイルはデフォルトでキャッシュされるファイルであるため、キャッシュのパージを行います。[Caching]ー[構成] を開きます。ここでは全ページで polyfill の置き換えをすぐに有効化するためにすべてパージをクリックします。

確認画面が出てくるのですべてパージをクリックします。

改めて Cloudflare 経由で html ファイルを確認します。先程と同様の表示です。

html ファイルのソースを確認すると、以下のように polyfill.js の URL が cdnjs.cloudflare.com へ自動で置き換わっています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Polyfill Check</title>
</head>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.js"></script>
<p>Hello World</p>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document; 中略</script><script defer src="https://static.cloudflareinsights.com/beacon.min.js/" 中略></script>
</body>
</html>